<!doctype html>
<!--
    ____________________________
  /|............................|
 | |:     	 CASH MUSIC        :|
 | |:     " cashmusic.org "    :|
 | |:     ,-.   _____   ,-.    :|
 | |:    ( `)) [_____] ( `))   :|
 |v|:     `-`   ' ' '   `-`    :|
 |||:     ,______________.     :|
 |||...../::::o::::::o::::\.....|
 |^|..../:::O::::::::::O:::\....|
 |/`---/--------------------`---|
 `.___/ /====/ /=//=/ /====/____/
      `--------------------'

-->

<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CASH Music</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="https://static-cashmusic.netdna-ssl.com/www/apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="shortcut icon" href="https://static-cashmusic.netdna-ssl.com/www/favicon.png" type="image/png">
        <script src="https://static-cashmusic.netdna-ssl.com/www/js/vendor/modernizr-2.8.3.min.js"></script>
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/normalize.css">
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/base-min.css">
        <!--[if lte IE 8]>
  		<link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/grids-responsive-old-ie-min.css">
		<![endif]-->
		<!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pure/grids-responsive-min.css">
		<!--<![endif]-->

    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/header.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/base.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/pages.css">
    <link rel="stylesheet" href="https://static-cashmusic.netdna-ssl.com/www/css/helper.css">

        <!--Fonts-->
		<link href='https://fonts.googleapis.com/css?family=Caesar+Dressing|Playfair+Display|Montserrat:400,700|Nunito:300,400,700' rel='stylesheet' type='text/css'>

        <!--Mobile Viewport -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="viewport" content="initial-scale=1.0,user-scalable=no">

        <!-- Open Graph Meta Data -->
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@cashmusic" />
        <meta name="twitter:creator" content="@cashmusic" />
        <meta property="og:url" content="http://cashmusic.github.io/cashmusic.js/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="CASH Music / CASHMusic.js" />
        <meta property="og:description" content="Front-end made easy. Embeds, lightboxes, and audio players. Animate, tween, or customize any page element by timecode or song progress — without a line of JavaScript." />
        <meta property="og:image" content="https://static-cashmusic.netdna-ssl.com/www/img/constant/social/share.jpg" />

        <script type="text/javascript" src="https://static-cashmusic.netdna-ssl.com/www/js/main.js"></script>
        <script type="text/javascript" src="https://cashmusic.org/public/cashmusic.js" data-options="lightboxvideo"></script>

    </head>

<body class="home">
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
   <div id="wrapper">
    <header role="banner">
      <div id="constant">
         <div id="top">
            <h1 class="logo"><a href="https://cashmusic.org/"><div class="icon icon-logo"><span>CASH Music</span></div></a></h1><!--logo-->
              <div class="menutoggle"><span></span><span></span><span></span></div><!-- menutoggle -->
            <nav  class="pure-u-1 pure-u-md-1-2">
                <ul class="pure-u-1">
                  <li><a class="home" href="https://cashmusic.org/">Home</a></li>
                  <li><a class="about" href="http://about.cashmusic.org/">About us</a></li>
                  <li><a class="platform" href="http://platform.cashmusic.org/">Tools</a></li>
                  <li><a class="watt" href="https://watt.cashmusic.org/">Watt</a></li>
                  <li><a class="education" href="http://education.cashmusic.org/">Education</a></li>
                  <li><a class="donate" href="https://donate.cashmusic.org/">Donate</a></li>
                </ul>
            </nav>
            <div id="platform-signup">
                <a href="https://cashmusic.org/admin/dosignup/" target="_blank">Sign up</a> <span>or</span><a class="login" href="https://cashmusic.org/admin/" target="_blank">Login</a>
            </div><!--platform-signup-->
         </div><!--top-->
         <div id="collapsed" class="hide">
            <h1 class="logo"><a href="https://cashmusic.org/"><div class="icon icon-logo"><span>CASH Music</span></div></a></h1><!--logo-->
              <div class="menutoggle"><span></span><span></span><span></span></div><!-- menutoggle -->
              <nav class="pure-u-1 pure-u-md-1-2">
                  <ul class="pure-u-1">
                      <li><a class="home" href="https://cashmusic.org/">Home</a></li>
                      <li><a class="about" href="http://about.cashmusic.org/">About us</a></li>
                      <li><a class="platform" href="http://platform.cashmusic.org/">Tools</a></li>
                      <li><a class="watt" href="https://watt.cashmusic.org/">Watt</a></li>
                      <li><a class="education" href="http://education.cashmusic.org/">Education</a></li>
                      <li><a class="donate" href="https://donate.cashmusic.org/">Donate</a></li>
                  </ul>
              </nav>
                <div id="platform-signup">
                    <a href="https://cashmusic.org/admin/dosignup/" target="_blank">Sign up</a> <span>or</span><a class="login" href="https://cashmusic.org/admin/" target="_blank">Login</a>
                </div><!--platform-signup-->
                <div class="overview">
                          <div class="overview-inner">
                           <div class="pure-u-1 pure-u-md-1-2">
                             <div class="overview-content">
                               <h5>TLDR;</h5>
                               <h2>CASH Music is a nonprofit empowering artists through open tools &amp; knowledge.</h2>
                               <p>We've built open source tools that are free to use, now &amp; forever, that let artists easily build web stores, trade downloads for email addresses, set up download codes, &amp; connect to their fans. With our publication, Watt, we ask &amp; answer questions that affect working musicians. We believe the best way to support music is by directly empowering musicians.</p>
                             </div><!--overview-content-->
                           </div><!--pure--><div class="pure-u-1 pure-u-md-1-2">
                             <div class="pure-u-1 pure-u-md-1-2">
                                  <div class="overview-content">
                                <h5>OUR TOOLS</h5>
                                <a href="http://platform.cashmusic.org/"><img src="http://static.cashmusic.netdna-cdn.com/www/img/platform/platform-screen_v9.jpg" alt="Our Tools"/></a>
                                <p>We make free &amp; open tools that connect all the services you already use in one place.</p>
                              </div><!--inner-->
                              </div><!--pure--><div class="pure-u-1 pure-u-md-1-2">
                                 <div class="overview-content">
                                <h5>WATT</h5>
                                <a href="https://watt.cashmusic.org/"><img src="http://static.cashmusic.netdna-cdn.com/www/img/constant/texture/watt-home.jpg" alt="Watt"/></a>
                                <p>Watt is our publication dedicated to asking and answering the questions that matter.</p>
                              </div><!--inner-->
                              </div><!--pure-->
                           </div><!--pure-->
                        </div><!--overview-inner-->
                        </div><!--overview-->
         </div><!--collapsed-->
      </div><!--constant-->

    </header>


        <main id="main" class="pure-u-1" role="main">
						<article class="pure-u-1 articlepage">
              <div id="hero-inline" class=" multiply hide" role="hero">
                  <h1>CASHMusic.js</h1>
                  <h2>Front-end made easy. Embeds, lightboxes, and audio players.<br />Animate, tween, or customize any page element by timecode or song progress — without a line of JavaScript.</h2>
                  <a href="https://github.com/cashmusic/cashmusic.js/archive/master.zip" class="more-link ">Download CASHMusic.js</a>     <a href="http://cashmusic.github.io/cashmusic.js/docs/" class="more-link">Read documentation</a>
              </div><!--hero-->
						<section class="article-content">
					<section>
            <blockquote><p>CASHMusic.js is a lightweight JavaScript library that handles CASH Music embeds, video lightboxing, and provides simple audio players. It also provides no-script animation keyed to song progress, enabling advanced audio players with little to no coding.</p></blockquote>
          </section>
          <section>
            <h3>Advanced demos</h3>
            <div class="pure-u-1">
      				<div class="pure-u-1 pure-u-md-1-2">
                <p><strong>Throwing Muses</strong> page player</p>
      					<a href="demos/throwingmuses/"><img src="demos/mainpage/assets/images/throwingmuses.jpg" width="100%" alt="Throwing Muses" /></a></div><div class="pure-u-1 pure-u-md-1-2"><p><strong>Not The 1s</strong> page player</p><a href="demos/notthe1s/"><img src="demos/mainpage/assets/images/notthe1s.jpg" width="100%" alt="notthe1s" /></a>
      				</div>
            </div><!--pure-->
          </section>
          <section>
            <h3>Feature: CASH Music platform embeds</h3>
      			  <blockquote><p>These are the standard embed codes offered via the CASH Music platform — HTML5-friendly workflows embedded in your page with a single line of JavaScript. These examples show an email signup form for the CASH Music mailing list.</p></blockquote>

            <div class="pure-u-1">
      				<div class="pure-u-1 pure-u-md-1-2 cm-example">
                <script type="text/javascript"> window.cashmusic.embed({endpoint:'https://cashmusic.org/public',elementid:'7748',cssoverride:'#mainspc{padding:10px 0px 0 0px; background:rgba(0,0,0,0); color:#999; margin-bottom:30px;}input{border-color:#999;}.cash_notation{color:#999}input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{background:#111; color:#999;}'});</script>
      				</div><div class="pure-u-1 pure-u-md-1-2 cm-example">
      					<script type="text/javascript">
      						window.cashmusic.embed(
      							{
      								endpoint: 'https://cashmusic.org/public',
      								elementid: '7748',
      								lightboxed: true,
      								lightboxtxt: 'Or open it in a lightbox.',
      								position: {
      									'top':'45%',
      									'width':'60%',
      									'left':'50%',
      									'marginLeft':'-30%'}
      							}
      						);
      					</script>
      				</div><!--pure-->
      			</div><!--pure-->
          </section>
          <section>
          <h3>Feature: Video lightboxes</h3>
    			<blockquote><p>
    				These are built from simple, ordinary links to YouTube or Vimeo pages. No embed
    				codes, no scripts. Just link to the page and specify the "lightboxvideo" option
    				by adding 'data-options="lightboxvideo"' to the CASHMusic.js script tag.
    			</p></blockquote>
    			<div class="pure-u-1">
    				<div class="pure-u-1 pure-u-md-1-2">
              <p>RED FANG - "Wires" (YouTube)</p>
              <a href="https://www.youtube.com/watch?v=WQPfQvLIseA"><img src="demos/mainpage/assets/images/redfang.jpg" alt="Red Fang" /></a>
    				</div><div class="pure-u-1 pure-u-md-1-2">
              <p>XIU XIU - "Boy Soprano" (Vimeo)</p>
    					<a href="https://vimeo.com/15744536"><img src="demos/mainpage/assets/images/xiuxiu.jpg" alt="Xiu Xiu" /></a>
    				</div>
    			</div><!--pure-->
        </section>
        <section>
    			<h3>Feature: Tween</h3>
    			<div class="pure-u-1">
    				<div class="pure-u-1 pure-u-md-1-2 cm-example">
    					<p>Basic tween example:</p>
    					<div style="position:relative;top:0;left:20px; z-index:1000;" >
    						<div
    							class="cashmusic tween setstyles"
    							style="position:absolute;left:-20px;top:4px;border-radius:50%;width:12px;height:12px;background-color:#ff475b;"
    							data-tween='{"play":[
    								{"name":"left","startAt":0,"endAt":25,"startVal":-20,"endVal":600,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"left","startAt":25,"endAt":90,"startVal":600,"endVal":-20,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"width","startAt":10,"endAt":"0:08","startVal":12,"endVal":400,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"height","startAt":10,"endAt":"0:08","startVal":12,"endVal":400,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"width","startAt":50,"endAt":100,"startVal":400,"endVal":12,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"height","startAt":50,"endAt":100,"startVal":400,"endVal":12,"units":"px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"}
    							]}'
    							data-styles='{
    							"stop":[
    								{"name":"backgroundColor","val":"#ff475b","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"left","val":"-20px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"width","val":"12px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"},
    								{"name":"height","val":"12px","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"}
    							],
    							"0:05":[
    								{"name":"backgroundColor","val":"#ff0","onSound":"http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3"}
    							]}'
    						></div>
    						<a href="http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3" class="cashmusic soundplayer inline">Learning Music - "Life-Cycle"</a>
    					</div></div><div class="pure-u-1 pure-u-md-1-2 cm-example">
    					<p>Play/pause/stop toggles</p>
    					<p>
    						A play/stop toggle: <a href="#" class="cashmusic soundplayer playstop" data-soundid="http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3">Toggle "Life-Cycle"</a><br />
    						A play/pause toggle: <a href="#" class="cashmusic soundplayer playpause" data-soundid="http://s3.amazonaws.com/cash_users/learningmusic/vos007/stream/07Life-Cycle.mp3">Toggle "Life-Cycle"</a>
    					</p>
    				</div>
    			</div>

        </section>
        <section>
    			<h3>Feature: Basic-interface players</h3>
    			<blockquote><p>
    				These players are built using the same progress/tween animation featured throughout the
    				page. An add-on module controls the playlists, pulls in a standard template using basic
    				html/css, and grabs the playlist either from JSON or by collecting all links to valid
    				audio in a div classed "cashmusic soundplayer playlist" — flexible and easy to configure
    				or customize.
    			</p></blockquote><p>
    				Advanced options for data tagging and JSONP-based audio-source resolution coming soon.</p>
            <p>A playlist play/pause toggle: <a href="#" class="cashmusic soundplayer playpause" data-playerid="testplaylist">Toggle (second) playlist</a></p>

    		 	 <div class="pure-u-1 pure-u-md-1-2 cm-example">
    					<div class="cashmusic soundplayer playlist" style="display:none;">
    						<a href="http://s3.amazonaws.com/cash_users/throwingmuses/demos/Film_128.mp3">Throwing Muses - Film (demo)</a>
    						<a href="http://s3.amazonaws.com/cash_users/throwingmuses/demos/Milan_128.mp3">Throwing Muses - Milan (demo)</a>
    					</div>
            </div><div class="pure-u-1 pure-u-md-1-2 cm-example">
    					<div class="cashmusic soundplayer playlist"
    						data-playlist='{"id":"testplaylist","artist":"artist is set","album":"yeah bro","tracks":[
    							{"id":"uniquestring","title":"Throwing Muses - Film (demo)","ISRC":"whatever","url":"http://s3.amazonaws.com/cash_users/throwingmuses/demos/Film_128.mp3"},
    							{"id":"uniquestring2","title":"Throwing Muses - Milan (demo)","url":"http://s3.amazonaws.com/cash_users/throwingmuses/demos/Milan_128.mp3"}
    						]}'
    					></div>
    				</div>

    			</section>
          <section>
    			<h3>License and dependencies</h3>
    				<blockquote><p>
    				CASHMusic.js is distributed under a <a href="https://github.com/cashmusic/cashmusic.js/blob/master/LICENSE">simplified BSD License</a>
    				— so pretty much go nuts. Build rad stuff. Give back where you can. There are no external dependencies other than
    				<a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager 2</a> for audio playback. We've
    				taken lengths to make sure we don't interfere with jQuery or similar libraries, so CASHMusic.js should play well with others.
    			</p></blockquote>
          <br />
    		</section>

        </section><!--article-content-->
					</article>
				</main>
        <footer role="contentinfo">

        <script type="text/javascript"> window.cashmusic.embed({endpoint:'https://cashmusic.org/public',elementid:'7748',cssoverride:'#mainspc{padding:10px 0px 0 0px; background:rgba(0,0,0,0); color:#999; margin-bottom:30px;}input{border-color:#999;}.cash_notation{color:#999}input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus{background:#111; color:#999;}'});</script>
                <div class="supporters">
                    <a class="pure-u-1 pure-u-md-2-5" href="https://www.shuttleworthfoundation.org/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/shuttleworth.png" alt="Shuttleworth"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="https://www.maxcdn.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/maxcdn.png" alt="MAXCDN"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="http://mailchimp.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/mailchimp.png" alt="Mailchimp"/></a><a class="pure-u-1-3 pure-u-md-1-5" href="http://www.rackspace.com/" target="_blank"><img src="https://static-cashmusic.netdna-ssl.com/www/img/constant/supporters/rackspace.png" alt="Rackspace"/></a>
                </div><!--supporters-->
            <nav>
                <div  class="pure-u-1-2 pure-u-md-1-5">
                <h6 class="title">Read</h6>
                <ul>
                    <li><a href="https://cashmusic.org/">Home</a></li>
                    <li><a href="https://medium.com/cash-music">Blog</a></li>
                </ul>
                </div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
                <h6 class="title">About</h6>
                <ul>
                    <li><a href="http://about.cashmusic.org/#mission">Mission</a></li>
                    <li><a href="http://about.cashmusic.org/#team">Team</a></li>
                    <li><a href="http://about.cashmusic.org/#board">Board</a></li>
                    <li><a href="http://about.cashmusic.org/#advisors">Advisors</a></li>
                </ul>
                </div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
                <h6 class="title">Tools</h6>
                <ul>
                    <li><a href="http://platform.cashmusic.org/">Platform</a></li>
                    <li><a href="http://venues.cashmusic.org/" target="_blank">Venue Data</a></li>
                    <li><a href="http://cashmusic.github.io/cashmusic.js/">Cashmusic.js</a></li>
                    <li><a href="http://help.cashmusic.org/">Support</a></li>
                </ul>
                </div><!--pure--><div  class="pure-u-1-2 pure-u-md-1-5">
                <h6 class="title">Developers</h6>
                <ul>
                    <li><a href="https://cashmusic.org/docs/">Documentation</a></li>
                    <li><a href="https://github.com/cashmusic/platform">Github</a></li>
                </ul>
                </div><!--pure--><div  class="pure-u-1 pure-u-md-1-5">
                <h6 class="title">Social</h6>
                <ul>
                    <li><a href="https://twitter.com/cashmusic">Twitter</a></li>
                    <li><a href="https://instagram.com/cashmusicorg/">Instagram</a></li>
                    <li><a href="https://www.facebook.com/cashmusic.org">Facebook</a></li>
                    <li><a href="https://www.youtube.com/user/cashmusicorg">Youtube</a></li>
                    <li><a href="https://cashmusic-slack.herokuapp.com/">Slack</a></li>
                </ul>
                </div><!--pure-->
            </nav>
                <h5>CASH Music is a <a href="https://medium.com/cash-music/the-organization-is-our-protest-song-1c9b01ea3ceb" target="_blank">nonprofit</a> working on <a href="http://about.cashmusic.org/" >free</a> &amp; <a href="https://medium.com/cash-music/jumping-off-cliffs-c112de91c5fd" target="_blank">open</a> <a href="https://platform.cashmusic.org/">tools</a> that give artists control of their careers</a></h5>
                <h6>&copy; 2016 CASH Music. All our code is open-source and free forever.<br/>Authors retain all rights to any works on this page, sharing them under a <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY license</a> unless otherwise noted.</h6>
        </footer>
        </div><!--wrapper-->

        <!--twitter-->
        <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

        <!-- Google Analytics -->
        <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-55083593-1', 'auto');
          ga('send', 'pageview');

        </script>

        <!-- Load Facebook SDK for JavaScript -->
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
    </body>
</html>
